<template>
  <div class="personage">
    <el-form :inline="true">
      <el-form-item label="用户名称：">
        <el-input v-model.trim="data.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系电话：">
        <el-input v-model.trim="data.value" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refer">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-alert type="info" show-icon :closable="false" class="pwd">
      <template>
        <span>已选择 {{ sum }} 项 消费总计：{{ summoney }} 元</span>
        <el-button type="text" size="small" @click="toggleSelection()">清空</el-button>
      </template>
    </el-alert>
    <el-table
      ref="form"
      style="width: 100%; margin-bottom: 20px;"
      :data="formData"
      @select="select"
      @select-all="select_all"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="用户名称" width="150" prop="username" />
      <el-table-column label="联系电话" width="150" prop="mobile" />
      <el-table-column label="商圈店铺数量" width="150" prop="number" />
      <el-table-column label="订单数量" width="150" prop="order" />
      <el-table-column label="消费额(元)" width="150" prop="money" />
      <el-table-column label="消费频次(次/店)" width="150" prop="frequency">
        <template #default="{row}">
          {{ frequency(row) }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page.page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      @current-change="changePage"
      @size-change="sizeChange"
    />
  </div>
</template>
<script>
import {
  getData,
  // getID,
  referData,
  date,
  getOrder,
  getshopID,
  // getList,
  dater
} from '@/api/businessArea/personage'
export default {
  data() {
    return {
      formData: {
        username: '',
        mobile: '',
        number: '',
        order: '',
        money: '',
        frequency: ''
      },
      data: {
        name: '',
        value: ''
      },
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      arr: [],
      money: [],
      allmoney: [],
      sum: 0,
      summoney: 0,
      newData: [],
      date: [],
      newdate: []
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    select_all(selection) {
      this.newData = selection
      this.summoney = 0
      this.sum = selection.length
      for (var i = 0; i < selection.length; i++) {
        this.summoney += selection[i].money
      }
    },
    select(selection) {
      this.newData = selection
      this.summoney = 0
      this.sum = selection.length
      console.log(selection)
      for (var i = 0; i < selection.length; i++) {
        this.summoney += selection[i].money
      }
    },
    frequency(row) {
      if (row.number === 0) {
        return 0
      } else {
        return row.order / row.number
      }
    },
    changePage(newPage) {
      this.page.page = newPage
      this.data = {
        name: '',
        value: ''
      }
      this.select(this.newData)
      this.getData()
    },
    sizeChange(size) {
      this.page.pagesize = size
      this.data = {
        name: '',
        value: ''
      }
      this.select(this.newData)
      this.getData()
    },
    reset() {
      this.data = {
        name: '',
        value: ''
      }
      this.refer()
    },
    async refer() {
      const { data } = await referData(this.data)
      this.formData = data
    },
    toggleSelection(rows) {
      this.newData = []
      this.select(this.newData)
      if (rows) {
        rows.forEach((row) => {
          this.$refs.form.toggleRowSelection(row)
        })
      } else {
        this.$refs.form.clearSelection()
      }
    },
    async getData() {
      // const req = await getList()
      const { data } = await dater(this.page)
      const res = await dater(this.page)
      const reser = await getData()
      this.getshop(res.data)
        .then(() => {
          var i = 0
          data.forEach((item) => {
            item.index = i++
          })
          data.forEach((value) => {
            value.number = this.arr[value.index]
          })
          this.formData = data
        })
      this.getOrder()
      this.page.total = reser.total
    },
    getshop(data) {
      return new Promise(async(resolve) => {
        this.arr = []
        let i = []
        const p = []
        data.forEach(async(v) => {
          p.push({ id: v.id, idx: 0 })
          v.id = 'userid=' + v.id
          i.push(v.id)
        })
        i = i.join().replace(/,/gi, '&')
        const res = await getshopID(i)
        res.data.forEach((item) => {
          p.forEach((value) => {
            if (item.userid === value.id) {
              value.idx++
            }
          })
        })
        p.forEach((item) => {
          this.arr.push(item.idx)
        })
        console.log(this.arr)
        resolve()
      })
    },
    getOrder() {
      return new Promise(async(resolve) => {
        const { data: data } = await date(this.page)
        console.log(data)
        console.log('---------------------')
        // 订单列表数据
        const { data: ddd } = await getOrder()
        console.log(ddd)
        console.log('------------------------')
        for (let i = 0; i < data.length; i++) {
          // 为每个商铺添加一个hyp对象用于保存销售额
          data[i].hyp = 0
          data[i].zzq = 0
          for (let j = 0; j < ddd.length; j++) {
            if (data[i].id === ddd[j].shop_id) {
              data[i].hyp += ddd[j].ordr_amt
              data[i].zzq += ddd[j].ordr_amt > 0 ? 1 : 0
            }
          }
        }
        this.formData = this.formData.map((v) => {
          v['order'] ? '' : (v['order'] = 0)
          v['money'] ? '' : (v['money'] = 0)
          data.forEach((v1) => {
            if (v1.username === v.username) {
              v.order += parseInt(v1.zzq)
              v.money += parseInt(v1.hyp)
            }
          })
          return v
        })
        console.log(this.formData)
      })
    }
  }
}
</script>
<style lang="scss">
.pwd {
  margin-top: 20px !important;
  padding: 0;
}
</style>
